<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>拓扑图在线设计器</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="icon" type="image/ico" href="/deng/images/icons/system.png" />
    <!-- 基础插件样式开始 -->
    <link href="/deng/source/plugins/newAdmin/bootstrap/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="/deng/source/plugins/newAdmin/vendors/base/flaticon.css" rel="stylesheet" type="text/css" />
    <link href="/deng/source/plugins/newAdmin/bootstrap/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link href="/deng/source/plugins/newAdmin/bootstrap/4.0.0/css/icons.css" rel="stylesheet" type="text/css" />
    <link href="/deng/source/plugins/newAdmin/bootstrap/4.0.0/css/style.css" rel="stylesheet" type="text/css" />
    <link href="/deng/source/plugins/newAdmin/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/deng/source/plugins/newAdmin/using/base/theme/smallleft/style.bundle.css" rel="stylesheet" type="text/css" />
    <!-- 基础插件样式结束 -->

    <!-- DataTables插件开始 -->
    <link href="/deng/source/plugins/newAdmin/datatables/1.10.15/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
    <link href="/deng/source/plugins/newAdmin/vendors/base/datatables.bundle.css" rel="stylesheet" type="text/css" />
    <!-- DataTables插件结束 -->
    <!-- 日期选择器控件开始 -->
    <link href="/deng/source/plugins/newAdmin/bootstrap/4.0.0/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" />
    <link href="/deng/source/plugins/newAdmin/bootstrap/4.0.0/plugins/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet" type="text/css" />
    <link href="/deng/source/plugins/newAdmin/bootstrap/4.0.0/plugins/bootstrap-timepicker/bootstrap-timepicker.min.css" rel="stylesheet" type="text/css" />
    <!-- 日期选择器控件结束 -->

    <!-- bootstrap验证框架开始 -->
    <link href="/deng/source/plugins/newAdmin/bootstrap/bootstrap-validate/bootstrapValidator.css" rel="stylesheet" type="text/css" />
    <!-- bootstrap验证框架结束 -->

    <!-- 笼罩插件开始 -->
    <link href="/deng/source/plugins/other/alertplug/alert/alert.css" type="text/css" rel="stylesheet"/>
    <!-- 笼罩插件结束 -->

    <!-- 提示插件开始 -->
    <link href="/deng/source/plugins/newAdmin/bootstrap/bootstrap-toastr/toastr.min.css" rel="stylesheet" type="text/css" />
    <!-- 提示插件结束 -->

    <!-- 右键插件开始-->
    <link href="/deng/source/css/bootcommon.min.css" rel="stylesheet" type="text/css" />
    <!-- 右键插件结束-->
    <link href="/deng/source/css/bootlist.css" rel="stylesheet" type="text/css" />

    <!-- 基础插件开始 -->
    <script src="/deng/source/plugins/newAdmin/vendors/base/jquery.min.js" type="text/javascript"></script>
    <!--
    <script src="/deng/source/plugins/nicescroll/sources/js/jquery.nicescroll.min.js" type="text/javascript"></script>
    -->
    <script src="/deng/source/plugins/newAdmin/bootstrap/4.0.0/js/popper.min.js"></script>
    <script src="/deng/source/plugins/newAdmin/bootstrap/4.0.0/js/bootstrap.min.js" type="text/javascript"></script>

    <!-- DataTables插件开始 -->
    <script src="/deng/source/plugins/newAdmin/datatables/1.10.15/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="/deng/source/plugins/newAdmin/datatables/1.10.15/js/dataTables.bootstrap4.min.js" type="text/javascript"></script>
    <!-- DataTables插件结束 -->
    <!-- 基础插件结束 -->

    <!-- 日期选择器控件开始 -->
    <script src="/deng/source/plugins/newAdmin/bootstrap/4.0.0/plugins/bootstrap-daterangepicker/daterangepicker.js" type="text/javascript"></script>
    <script src="/deng/source/plugins/newAdmin/bootstrap/4.0.0/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
    <script src="/deng/source/plugins/newAdmin/bootstrap/4.0.0/plugins/bootstrap-timepicker/bootstrap-timepicker.js" type="text/javascript"></script>
    <script src="/deng/source/plugins/newAdmin/bootstrap/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js" type="text/javascript"></script>
    <!-- 日期选择器控件结束 -->

    <!-- 笼罩插件开始 -->
    <script src='/deng/source/plugins/other/alertplug/alert/alert.js' type="text/javascript" ></script>
    <!-- 笼罩插件结束 -->

    <!-- 提示插件开始 -->
    <script src="/deng/source/plugins/newAdmin/bootstrap/bootstrap-toastr/toastr.min.js" type="text/javascript"></script>
    <script src="/deng/source/plugins/newAdmin/bootstrap/bootbox.js" type="text/javascript"></script>
    <!-- 提示插件结束 -->
    <!-- 公共模块包含上传控件，共同JS封装 -->

    <!-- 右键插件开始-->
    <script src="/deng/source/plugins/newAdmin/bootstrap/bootstrap-contextmenu/BootstrapMenu.min.js" type="text/javascript"></script>
    <!-- 右键插件结束-->

    <!-- bootstrap验证框架开始 -->
    <script src="/deng/source/plugins/newAdmin/bootstrap/bootstrap-validate/bootstrapValidator.js" type="text/javascript"></script>
    <!-- bootstrap验证框架结束 -->

    <script src="/deng/source/js/base.js" type="text/javascript" ></script>
    <script src="/deng/source/js/boot.min.js" type="text/javascript" ></script>
    <script src="/deng/source/plugins/newAdmin/using/base/theme/default/scripts.bundle.js" type="text/javascript"></script>

    <link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
    <style type="text/css">
        .geSidebarContainer .geTitle {
            display: block;
            font-size: 10pt;
            border-bottom: 1px solid #f8f8f8;
            font-weight: normal;
            padding: 12px 0px 12px 14px;
            margin: 0px;
            cursor: default;
            background: #ffffff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.4em;
        }
        .geToolbarContainer .geLabel {
            float: left;
            margin: 2px;
            cursor: pointer;
            padding: 3px 5px 18px 5px;
            border: 1px solid transparent;
            opacity: 0.6;
            filter: alpha(opacity=60);
        }
        .geDialog {
            position: absolute;
            background: white;
            overflow: hidden;
            padding: 8px;
            border: 1px solid #acacac;
            -webkit-box-shadow: 0px 0px 2px 2px #d5d5d5;
            -moz-box-shadow: 0px 0px 2px 2px #d5d5d5;
            box-shadow: 0px 0px 2px 2px #d5d5d5;
            _filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=2, Color='#d5d5d5', Positive='true');
            z-index: 2;
        }
        .m-checkbox-list .m-checkbox, .m-checkbox-list .m-radio, .m-radio-list .m-checkbox, .m-radio-list .m-radio {
            display: inline;
        }

        .geFooterContainer {
            background: #FFF;
            border-top: 1px solid #FFF;
        }
        input{
            border: none;
            outline: none;
            border-bottom: 1px solid #ebedf2;
            border-top: 1px solid #ebedf2;
            border-left: 1px solid #ebedf2;
            border-right: 1px solid #ebedf2;
        }
        input:focus,
        input:active{
            outline: none;
            border-bottom: 1px solid #ebedf2;
            border-top: 1px solid #ebedf2;
            border-left: 1px solid #ebedf2;
            border-right: 1px solid #ebedf2;
        }

        a {
            text-decoration: none;
        }
        /*正常的未被访问过的链接*/
        a:link {
            text-decoration: none;
        }
        /*已经访问过的链接*/
        a:visited {
            text-decoration: none;
        }
        /*鼠标划过(停留)的链接*/
        a:hover {
            text-decoration: none;
        }
        /* 正在点击的链接*/
        a:active {
            text-decoration: none;
        }
        .m-checkbox.m-checkbox--state-brand.m-checkbox--solid>span {
            background: #ad5beb;
            border: 1px solid transparent!important;
        }
        .m-checkbox.m-checkbox--state-brand.m-checkbox--solid>input:checked~span {
            background: #ad5beb;
        }
        .m-radio.m-radio--state-success.m-radio--solid>input:checked~span {
            background: #ad5beb;
        }
        .m-radio.m-radio--state-success.m-radio--solid>span {
            background: #ad5beb;
            border: 1px solid transparent!important;
        }

        .m-portlet {
            -webkit-box-shadow: 0 1px 15px 1px rgba(69,65,78,.08);
            box-shadow: 0 0px 0px 0px rgba(69,65,78,.08);
            background-color: #fff;
        }

        /*滚动条整体部分,必须要设置*/
        ::-webkit-scrollbar{
            width: 6px;
            height: 6px;
            background-color: #fff;
        }
        /*滚动条的轨道*/
        ::-webkit-scrollbar-track{
            box-shadow: inset 0 0 0px rgba(0,0,0,.3);
            background-color: #fff;
        }
        /*滚动条的滑块按钮*/
        ::-webkit-scrollbar-thumb{
            border-radius: 10px;
            background-color: #e0e0e0;
            box-shadow: inset 0 0 0px #000;
        }
        /*滚动条的上下两端的按钮*/
        ::-webkit-scrollbar-button{
            height: 6px;
            background-color: #fff;
        }
        html {
            /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
            -ms-overflow-style:none;
            /*火狐下隐藏滚动条*/
            overflow:-moz-scrollbars-none;
        }
        /*Chrome下隐藏滚动条，溢出可以透明滚动*/
        html::-webkit-scrollbar{width:0px}


        .flow {
            stroke-dasharray: 8;
            animation: dash 0.5s linear;
            animation-iteration-count: infinite;
        }
        @keyframes dash {
            to {
                stroke-dashoffset: -16;
            }
        }
    </style>
    <script type="text/javascript">
        mxBasePath = "../../../../../view/pc/design/power-design/src";
        var resourcesPath = "view/pc/design/power-design"
    </script>
    <script type="text/javascript" src="../src/mxClient.min.js"></script>
</head>
<body class="geEditor">
    <script type="text/javascript">
    </script>
</body>
<style>
    .nav-tabs-vertical a.active {
        color: #7f63f4;
        border-right: 1px solid #7f63f4;
        border-top: 0;
        border-left: 0;
    }
    .nav-tabs-vertical a, .user-intro h4, .user-skill .user-info li h5 {
        margin-bottom: .5rem;
    }

    .nav-tabs a {
        text-align: left;
        padding: .9rem;
        color: #464a53;
        font-size: 1.1rem;
    }

    .tab-content {
        padding: 5px 0 0 0;
    }


    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
        padding-right: 1px;
        padding-left: 1px;
    }

    .nav-tabs-vertical a.active {
        /*color: #fff;*/
        border-right: 1px solid #7f63f4;
        border-top: 0;
        border-left: 0;
        /*background: #7f63f4;*/
    }
    .svBtn{
        background: #f8f8f8;color: #fff;
    }
</style>
<style type="text/css">
    .flow {
        stroke-dasharray: 8;
        animation: dash 0.5s linear;
        animation-iteration-count: infinite;
    }
    @keyframes dash {
        to {
            stroke-dashoffset: -16;
        }
    }
</style>

<!-- Example code -->
<script type="text/javascript">
    function main(container)
    {
        var graph = new mxGraph(container);
        graph.setEnabled(false);
        var parent = graph.getDefaultParent();

        var vertexStyle = 'shape=cylinder;strokeWidth=2;fillColor=#ffffff;strokeColor=black;' +
            'gradientColor=#a0a0a0;fontColor=black;fontStyle=1;spacingTop=14;';

        graph.getModel().beginUpdate();
        try
        {
            var v1 = graph.insertVertex(parent, null, 'Pump', 20, 20, 60, 60,vertexStyle);
            var v2 = graph.insertVertex(parent, null, 'Tank', 200, 150, 60, 60,vertexStyle);
            var e1 = graph.insertEdge(parent, null, '', v1, v2,
                'strokeWidth=3;endArrow=block;endSize=2;endFill=1;strokeColor=black;rounded=1;');
            e1.geometry.points = [new mxPoint(230, 50)];
            graph.orderCells(true, [e1]);
        }
        finally
        {
            // Updates the display
            graph.getModel().endUpdate();
        }

        // Adds animation to edge shape and makes "pipe" visible
        var state = graph.view.getState(e1);
        state.shape.node.getElementsByTagName('path')[0].removeAttribute('visibility');
        state.shape.node.getElementsByTagName('path')[0].setAttribute('stroke-width', '6');
        state.shape.node.getElementsByTagName('path')[0].setAttribute('stroke', 'lightGray');
        state.shape.node.getElementsByTagName('path')[1].setAttribute('class', 'flow');
    };
</script>
<script>
    // var dialogWating_ = showWating({msg:'正在拼命的加载中...'});
    // window.onload = function () {
    //     closeWating(null,dialogWating_);
    // }
    // //用于生成uuid
    // function S4() {
    //     return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
    // }
    // function guid() {
    //     return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
    // }

    /** 表单序列化成json字符串的方法  */
    // function formConvertToJson(formId) {
    //     var paramArray = $('#' + formId).serializeArray();
    //     /*请求参数转json对象*/
    //     var jsonObj={};
    //     $(paramArray).each(function(){
    //         jsonObj[this.name]=this.value;
    //     });
    //     console.log("--------",JSON.stringify(paramArray));
    //     //json对象再转换成json字符串
    //     return JSON.stringify(paramArray);
    // }
</script>
<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'))">

    <!-- Creates a container for the graph with a grid wallpaper -->
    <div id="graphContainer"
         style="position:relative;overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">
    </div>
</body>
</html>
